<main>
	<header>
		<div class="toolbar">
			<a class="bar-button back-button"><i class="dwz-icon-arrow-left"></i></a>
			<div class="header-title">百分比环形图</div>
			<button class="button mini"><i class="dwz-icon-refresh"></i>更新</button>
		</div>
	</header>

	<div class="content">

		<div class="scroll-content dwz-scroll">
			<div class="scroll">

				<div class="flex-wrap-center">
					<div class="flex-item" id="chart-percent-1"></div>
					<div class="flex-item" id="chart-percent-2"></div>
				</div>
				<div class="flex-wrap-center">
					<div class="flex-item" id="chart-percent-3"></div>
					<div class="flex-item" id="chart-percent-4"></div>
				</div>

				<div class="flex-wrap-center">
					<div class="flex-item" id="chart-percent-5"></div>
					<div class="flex-item" id="chart-percent-6"></div>
				</div>
				<div class="flex-wrap-center">
					<div class="flex-item" id="chart-percent-7"></div>
					<div class="flex-item" id="chart-percent-8"></div>
				</div>

			</div>
		</div>

	</div>
</main>

<script type="text/javascript">
function helper(tpl, params) {
	// console.log(this, tpl, params)

	const chart1 = new DwzChartPercent({
		$el: this.find('#chart-percent-1'),
		strokeLinecap: 'round',
		startColor: '#0099DD',
		endColor: '#1AFF00',
		textColor: '#1AFF00',
		textSize: '40px',
		bgColor: 'rgba(200, 200, 200, .8)',
		fgWidth: 15,
		bgWidth: 3,
		data: 25
	});
	const chart2 = new DwzChartPercent({
		$el: this.find('#chart-percent-2'),
		strokeLinecap: 'round',
		textColor: '#7ED7FF',
		bgColor: 'rgba(120, 100, 80, .8)',
		fgWidth: 10,
		bgWidth: 5,
		data: 50
	});
	const chart3 = new DwzChartPercent({
		$el: this.find('#chart-percent-3'),
		strokeLinecap: 'round',
		startColor: '#07FCEE',
		endColor: '#07FCEE',
		textColor: '#07FCEE',
		data: 75
	});

	const chart4 = new DwzChartPercent({
		$el: this.find('#chart-percent-4'),
		strokeLinecap: 'round',
		startColor: '#0099DD',
		endColor: '#7ED7FF',
		textColor: '#7ED7FF',
		data: 98
	});
	const chart5 = new DwzChartPercent({
		$el: this.find('#chart-percent-5'),
		strokeLinecap: 'butt',
		startColor: '#0099DD',
		endColor: '#1AFF00',
		textColor: '#1AFF00',
		fgWidth: 15,
		bgWidth: 3,
		data: 25
	});
	const chart6 = new DwzChartPercent({
		$el: this.find('#chart-percent-6'),
		strokeLinecap: 'butt',
		startColor: '#0099DD',
		endColor: 'red',
		textColor: 'red',
		fgWidth: 10,
		bgWidth: 10,
		data: 50
	});
	const chart7 = new DwzChartPercent({
		$el: this.find('#chart-percent-7'),
		strokeLinecap: 'butt',
		startColor: '#0099DD',
		endColor: '#01A9F8',
		textColor: '#01A9F8',
		fgWidth: 8,
		bgWidth: 6,
		sideType: 'outside',
		data: 75
	});
	const chart8 = new DwzChartPercent({
		$el: this.find('#chart-percent-8'),
		strokeLinecap: 'butt',
		startColor: '#0099DD',
		endColor: '#1AFF00',
		textColor: '#1AFF00',
		fgWidth: 8,
		bgWidth: 6,
		sideType: 'inside',
		data: 98
	});

	this.find('button.button').click((event) => {
		const data1 = Math.round(Math.random() * 100);
		const data2 = Math.round(Math.random() * 100);
		const data3 = Math.round(Math.random() * 100);
		const data4 = Math.round(Math.random() * 100);

		chart1.setData(data1);
		chart2.setData(data2);
		chart3.setData(data3);
		chart4.setData(data4);
		chart5.setData(data1);
		chart6.setData(data2);
		chart7.setData(data3);
		chart8.setData(data4);
	});
}
</script>
